<template>
	<view :class="[primarySize()]">
		<view class="container bgf4">
			<view class="bgf authorize_content">
				<view class="verify-title">完善个人信息</view>
				<view class="verify-subtitle">请上传头像和填写昵称以完善您的个人信息</view>
				
				<button class="header" hover-class="none" @click="onChooseAvatar">
					<image :src="avatar?avatar:'https://admin.mosizp.cn/static/public/avatar.png'" mode="aspectFill" class="head"></image>
					<view class="tips flex-box flex-col flex-center">
						<view>上传</view>
						<view>头像</view>
					</view>
				</button>
				
				<view class="input-box flex-box mt50">
					<view class="fs28">用户昵称</view>
					<input class="flex-grow-1 pl30 tr fs28" type="nickname" v-model="nickname" placeholder="请输入昵称" />
				</view>
			</view>
			<view class="plr30 ptb60">
				<button hover-class="none" class="btn1 ml0" @click="save">保存信息</button>
				<button hover-class="none" class="btn2 ml0 mt20" @click="skipVerify">稍后完善</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				userinfo: '',
				avatar: '',
				nickname: '',
				fromPage: '' // 记录来源页面
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			// 获取来源页面
			if (options.from) {
				this.fromPage = options.from;
			}
			
			// 获取用户信息
			this.userinfo = this.$core.getUserinfo();
			this.avatar = this.userinfo.avatar || '';
			this.nickname = this.userinfo.nickname || '';
		},
		methods: {
			onChooseAvatar() {
				let page = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						let file = res.tempFiles[0];
						page.$core.uploadFile({
							filePath: file.path,
							success(ret, response) {
								page.avatar = ret.data.url
							}
						});
					}
				});
			},
			save() {
				let page = this;
				let data = {
					'avatar': this.avatar,
					'nickname': this.nickname
				}
				var rule = [{
						name: 'avatar',
						rules: ['require'],
						errorMsg: {
							require: '请上传头像'
						}
					},
					{
						name: 'nickname',
						rules: ['require', 'max:50'],
						errorMsg: {
							require: '请填写昵称',
							max: '昵称最多50个字符'
						}
					},
				];

				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				
				this.$core.post({
					url: 'xilujob.user/profile',
					data: data,
					success(ret, response) {
						let userinfo = page.$core.getUserinfo();
						userinfo.avatar = data.avatar;
						userinfo.nickname = data.nickname;
						page.$core.setUserinfo(userinfo);
						uni.$emit(app.globalData.Events.UserinfoUpdate, userinfo);
						
						// 完成后返回来源页面或首页
						if (page.fromPage) {
							uni.redirectTo({
								url: page.fromPage
							});
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
						
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					}
				});
			},
			skipVerify() {
				// 用户选择稍后完善，记录状态并返回
				uni.setStorageSync('userinfo_verify_skipped', 'true');
				
				// 返回来源页面或首页
				if (this.fromPage) {
					uni.redirectTo({
						url: this.fromPage
					});
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	}
</script>

<style>
	.authorize_content {
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 30rpx;
	}
	
	.verify-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
		color: #333;
	}
	
	.verify-subtitle {
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 40rpx;
		color: #666;
	}
	
	.header {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
		background-color: transparent;
		padding: 0;
		margin-bottom: 40rpx;
	}
	
	.header::after {
		border: none;
	}
	
	.head {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	
	.tips {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		border-radius: 50%;
		font-size: 24rpx;
	}
	
	.input-box {
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}
	
	.btn1 {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: var(--primary);
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
	
	.btn2 {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #f5f5f5;
		color: #666;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
</style>